<template>
    <div class="main el-pd-20 el-box-init el-bkgd-white">
        <!-- 操作按钮 -->
        <el-row class="table-btn el-pd-b-20">
            <el-button type="primary" v-if="isAuth('SYS_MENU_ADD')" @click="onOpenWin('add')">
                <el-icon class="table-icon"><plus /></el-icon>
                新增
            </el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="tableList" border stripe :row-style="showTr">
            <el-table-column prop="name" label="名称" width="250">
                <template #default="scope">
                    <div class="name-and-icon" :class="'aname' + scope.row.level">
                        <span
                            class="icon"
                            v-if="toggleIconShow(0, scope.row)"
                            @click="toggle(scope.$index)"
                        >
                            <el-icon>
                                <minus v-show="scope.row.expanded" />
                                <plus v-show="!scope.row.expanded" />
                            </el-icon>
                        </span>
                        <span>
                            {{ scope.row.name }}
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="path" label="路径" width="180px"></el-table-column>

            <el-table-column prop="type" label="类型" width="100px">
                <template #default="{ row }">
                    <span>{{ menuType(row.type) }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="code" label="权限  "></el-table-column>

            <el-table-column prop="api" label="API"></el-table-column>

            <el-table-column prop="sort" label="排序" width="60"></el-table-column>

            <el-table-column label="操作" :width="$maxActionWidth" align="center" fixed="right">
                <template #default="{ row }">
                    <el-button v-if="isAuth('SYS_MENU_ADD')" @click="onOpenWin('addSub', row.id)">
                        <el-icon class="table-icon"><plus /></el-icon>
                        新增子类
                    </el-button>
                    <el-button
                        type="primary"
                        v-if="isAuth('SYS_MENU_UPDATE')"
                        @click="onOpenWin('edit', row.id)"
                    >
                        <el-icon class="table-icon"><edit /></el-icon>
                        编辑
                    </el-button>
                    <el-button type="danger" v-if="isAuth('SYS_MENU_DEL')" @click="onDel(row.id)">
                        <el-icon class="table-icon"><delete /></el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹框组件 -->
        <dialog-add-or-update ref="addRefs" :tableList="tableList" />
    </div>
</template>

<script>
import { getCurrentInstance, ref } from 'vue';
import { adminMenu as Api } from 'api';
import DialogAddOrUpdate from './add-or-update.vue';

export default {
    components: {
        DialogAddOrUpdate
    },
    setup() {
        const { proxy } = getCurrentInstance();
        let tableList = ref([]);

        // 获取列表
        const getList = async (pid = 0) => {
            const { code, data } = await proxy.$http.get(Api.getList);
            if (code === 200) {
                const oneMenuList = proxy.$utils.getCategory(data);
                const menuList = proxy.$utils.getChildrenTree(oneMenuList, oneMenuList[0]);
                tableList.value = proxy.$utils.getTreeToArray(menuList, null, null, false); // 按可伸展处理分类

                if (pid != '') {
                    getIdToPid(tableList.value, pid, []);
                }
            }
        };
        // 打开弹框组件
        const onOpenWin = (type, id) => {
            if (type == 'add') {
                proxy.$refs.addRefs.id = '';
            } else {
                proxy.$refs.addRefs.id = id;
            }

            proxy.$refs.addRefs.tableType = type;

            // 通过ref打开弹窗组件内开关
            proxy.$refs.addRefs.visible = true;
        };
        // 显示行
        const showTr = (data, index) => {
            let show = data.row.parent ? data.row.parent.expanded && data.row.parent.show : true;
            data.row.show = show;
            return show ? '' : 'display: none;';
        };
        // 点击展开和关闭的时候，图标的切换
        const toggleIconShow = (index, row) => {
            if (row.childrens && row.childrens.length > 0) {
                return true;
            }

            return false;
        };
        // 展开下级
        const toggle = (trIndex) => {
            let row = tableList.value[trIndex];
            row.expanded = !row.expanded;
        };
        // 获取当前编辑ID的所有父ID，更新表格根据得到的父ID展开，方便下次定位添加
        const getIdToPid = (list, pid) => {
            list.forEach((obj, index) => {
                if (obj.id == pid) {
                    toggle(index);

                    if (obj.childrens) {
                        getIdToPid(list, obj.pid);
                    }
                }
            });
        };
        // 删除
        const onDel = async (id) => {
            // 确认删除
            const confirm = await proxy.$msgBox.confirm({
                cancel: true
            });

            if (confirm) {
                const { code, msg } = await proxy.$http.delete(Api.del, {
                    data: { id }
                });

                if (code === 200) {
                    proxy.$msg.success(msg);
                    getList();
                }
            }
        };
        // 类型
        const menuType = (value) => {
            return proxy.$systemMenuTypeToStr(value);
        };

        getList();

        return {
            tableList,
            onOpenWin,
            showTr,
            toggleIconShow,
            toggle,
            getIdToPid,
            menuType,
            getList,
            onDel
        };
    }
};
</script>
